<template>
    <div class="order-manage">
        <!-- 搜索条件 -->
        <div class="search-condition">
            <div class="condition">
                <!-- 搜索第一行 -->
                <div class="first-line">
                    <!-- 工单编号 -->
                    <div class="search-wrapper special">
                        <div class="search-label">工单编号：</div>
                        <el-input class="search-input" placeholder="请输入" v-model="workOrderNo" clearable></el-input>
                    </div>
                    <!-- 任务名称 -->
                    <div class="search-wrapper">
                        <div class="search-label">任务名称：</div>
                        <el-select v-model="taskName" placeholder="===请选择===">
                            <el-option label="材料进场验收" value="1"></el-option>
                            <el-option label="隐蔽工程验收" value="2"></el-option>
                            <el-option label="施工现场巡检" value="3"></el-option>
                            <el-option label="安全施工巡查" value="4"></el-option>
                        </el-select>
                    </div>
                    <!-- 状态 -->
                    <div class="search-wrapper">
                        <div class="search-label">状态：</div>
                        <el-select v-model="workOrderStatus" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in orderStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <!-- 工程名称 -->
                <div class="search-wrapper special">
                    <div class="search-label">工程名称：</div>
                    <el-input class="search-input" placeholder="请输入" v-model="projectName" clearable></el-input>
                </div>
            </div>
            <div class="search">
                <el-row>
                    <el-button @click="resetQuery">重置</el-button>
                    <el-button type="primary" @click="resultQuery">查询</el-button>
                    <el-button type="text" @click="expandCondition">
                        展开
                        <i
                            :class="{
                                'el-icon-arrow-down': !expandConditionFlag,
                                'el-icon-arrow-up': expandConditionFlag
                            }"
                        ></i>
                    </el-button>
                </el-row>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="main-content" v-loading="loading">
            <!-- 操作按钮 -->
            <div class="handle-action">
                <el-row>
                    <el-button type="primary" @click="sceneProspect">任务处理</el-button>
                </el-row>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <!-- 状态 -->
                    <el-table-column label="工单状态" width="100">
                        <template slot-scope="scope">{{ status(scope.row.taskStatus) }}</template>
                    </el-table-column>
                    <!-- 编号 -->
                    <el-table-column prop="workOrderNumber" label="工单编号" width="140"></el-table-column>
                    <!-- 工程名称 -->
                    <el-table-column
                        prop="projectName"
                        label="工程名称"
                        show-overflow-tooltip
                        width="300"
                    ></el-table-column>
                    <!-- 任务名称 -->
                    <el-table-column label="任务名称" width="140">
                        <template slot-scope="scope">{{ task(scope.row.taskName) }}</template>
                    </el-table-column>
                    <!-- 开工日期 -->
                    <el-table-column prop="startTime" label="开工日期" width="100"></el-table-column>
                    <!-- 竣工日期 -->
                    <el-table-column prop="endTime" label="竣工日期" width="100"></el-table-column>
                    <!-- 装修类型 -->
                    <el-table-column
                        prop="orderType"
                        label="装修类型"
                        width="100"
                        :formatter="formatterOrderType"
                    ></el-table-column>
                    <!-- 装修面积 -->
                    <el-table-column prop="renovationTotalArea" label="装修面积" width="120"></el-table-column>
                    <!-- 创建人 -->
                    <el-table-column prop="createEmp" label="创建人" width="120"></el-table-column>
                    <!-- 创建时间 -->
                    <el-table-column prop="updateTm" label="创建时间" width="120"></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
        <!-- 施工现场 -->
        <scene-dialog
            v-if="sceneFlag"
            :sceneFlag="sceneFlag"
            :taskId="taskId"
            :taskName="taskNameTitle"
            :workOrderNumber="workOrderNumber"
            @closeDialog="closeDialog"
        />
        <!-- 安全施工巡逻 -->
        <safe-dialog
            v-if="safeFlag"
            :safeFlag="safeFlag"
            :taskId="taskId"
            :taskName="taskNameTitle"
            :workOrderNumber="workOrderNumber"
            @closeDialog="closeDialog"
        />
        <base-dialog
            v-if="dialogFlag"
            :dialogFlag="dialogFlag"
            :title="title"
            :taskId="taskId"
            :taskName="taskNameTitle"
            :workOrderNumber="workOrderNumber"
            @closeDialog="closeDialog"
        />
    </div>
</template>
<script>
import ConstrctionTask from './ConstrctionTask.js';
export default {
    ...ConstrctionTask
};
</script>

<style scoped lang="less">
@import './ConstrctionTask.less';
</style>
